<template>
    <div>
        <button @click="show = true">点我弹窗</button>
        <Teleport to="body">
        <div v-if="show" class="mask">
            <div class="dialog">
                <h3>我是一个弹窗</h3>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <h4>一些内容</h4>
                <button @click="show=false">关闭</button>
            </div>
        </div>
    </Teleport>

    </div>
</template>

<script setup>
import { ref } from 'vue'
let show = ref(false)
</script>

<style  scoped>
.mask{
    z-index: 999;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.dialog{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 200px;
    height: 200px;
    background-color: bisque;
}
</style>